<template>
	<view v-if="tksetting">
		<u-navbar 
		:leftText="u_city"
		:leftIcon="u_city?`map`:' '" 
		:leftIconColor="tksetting.titlecolor" 
		:bgColor="tksetting.color" :title="tksetting.title" 
		:titleStyle="{color:tksetting.titlecolor}" 
		:placeholder="true">
		</u-navbar>
		<view class="content" style="padding:20rpx;">
	   <view class="piclist" style="overflow: hidden;" v-if="piclist">
		   <u-swiper 
		   :list="piclist" 
		   keyName="image" 
		   imgMode="aspectFill"
		   height="200"
		   @click="rote_url" 
		   :loading="piclist_loading"
		   radius="10" indicator></u-swiper>
	   </view>
	   <view style="padding: 20rpx 0;">
	   <u-grid col="4" :border="false">
			   <u-grid-item  v-for="(item,index) in menus" :key='index' @click="menus_url(item.url)">
				   <view style="display: flex; align-items: center; justify-content: center;padding: 10rpx; 0; flex-direction: column;">
						   <view style="position: relative;">
							   <u-image :src="item.xcx_pic" width="50" height="50" mode="aspectFit" shape="circle"></u-image>
							   <u-badge v-if="item.bage" :absolute="true" :bgColor="tksetting.color" :value="item.bage" :offset="[0, -10]"></u-badge>
						   </view>
						   <view class="grid-text" style="text-align: center;">{{item.title}}</view>
					   </view>
			   </u-grid-item>
	   	</u-grid>
	  </view>
	  <view>
		  <u--image 
			  @click="menus_url(item.url)"
			  v-for="(item,index) in piclist1" :key="index" :src="item.image" 
			  mode="widthFix" width="100%"  height="auto" radius="10">
		  </u--image>
	  </view>	
	   <u-gap height="10"></u-gap>
	   			<my-block  icons="star" title="热门文章"  path="/pages/news/list" :color="tksetting.color"></my-block>
	   			<view class="pans_count">
					
					
				<!-- 图片在左的排版方式 -->	
				 	<u-cell-group :border="false">
							   <u-transition :show="true" duration="400"  mode="fade-left">
							   <u-cell
								   v-for="(item, index) in news" :key="index"
								   @click="c_news(item.aid)"
							   >
							    <view slot="title">
									<u--text lines="2" :text="item.title"  size="14"></u--text>
								</view>
								<view slot="label">
									<u--text lines="2" lineHeight="20" type="info" size="12" :text="item.label"></u--text>
									<view style="display: flex;justify-content: space-around;">
										<u--text prefixIcon="clock" type="info" size="12" mode="date" :text="item.t"></u--text>
										<u--text prefixIcon="eye" type="info" size="12" :text="item.hit"></u--text>
									</view>
								</view>
								<view slot="value" style="padding-left: 12rpx;">
									<u--image radius="4" :src="item.pic"  width="80" height="80"></u--image>
								</view>
							</u-cell>
							</u-transition>
					</u-cell-group> 
					
					    <!-- <u-transition :show="true" duration="1000"  mode="fade-left">
							 <u-cell 
							  v-for="(item, index) in news" :key="index"
							  :title="item.title" :name="item.aid" :isLink="true" arrow-direction="right"
							  @click="c_news"
							  >
							  <u-icon solt="right-icon" name="right"></u-icon>
							  <u--text slot="value" align="right" mode="date" size="12" :text="item.t"></u--text>
							 </u-cell>
						</u-transition> -->
	   			</view>
	</view>
	
	<!-- #ifdef MP-WEIXIN -->
	     <my-tabbar :color="tksetting.color"></my-tabbar>
	<!-- #endif -->
	
	</view>
</template>
<script>
	import {toast, wxcode, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
	import { mapState } from "vuex";
	// #ifdef MP-WEIXIN 
	     const citySelector = requirePlugin('citySelector');
	// #endif 
	
	export default {
			data() {
				return {
					u_city:'',
					news:[],
					kf_extInfo:'',
					kf_corpId:'',
					news_note:'暂无公告',
					show:false,
					tklist:[],
					logo:'',
					color:'',
					titlecolor:"#333333",
					tkset:{},
					title:'',
					piclist:[],
					piclist1:[],
					piclist2:[],
					piclist3:[],
					piclist4:[],
					piclist5:[],
					piclist_loading:true,
					menus:[],
					productList:[],
					video:[]
				}
			},
			async onLoad(opt) {
				
				if(opt.mypid){
					this.$u.vuex('mypid', opt.mypid)
				}
				
				//定位城市
				//this.cityselect();
				
			},
			async onShow() {
			
				this.init();
				
				// #ifdef MP-WEIXIN 
				     const selectedCity = citySelector.getCity();
				     if(selectedCity){
				     	const lives=Math.floor(selectedCity.id / 100)
						console.log(lives)
						console.log(selectedCity.fullname)
				     	//this.$u.vuex('lives', lives)
				     	//this.$u.vuex('cityName', selectedCity.fullname)
				     }
				// #endif 
				
			},
			onUnload() {
				
			    // 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
				// #ifdef MP-WEIXIN
				    citySelector.clearCity();
				// #endif 
			    
			},
			onReady() {
				
			},
			computed: {
				...mapState(['tksetting','cityName'])
			},
			methods: {
				
				cityselect(){
					const key = 'QK6BZ-T2MCL-TCXPD-M7WMR-IESQF-M6FEN'; // 使用在腾讯位置服务申请的key
					const referer = '血脉联动'; // 调用插件的app的名称
					const hotCitys = ''; // 用户自定义的的热门城市
					const accurate = '0'; // 是否使用getLocation进行定位
					
					wx.navigateTo({
					  url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}&accurate=${accurate}`,
					});
					
				},
			   async init(){
				   
				 const re=await this.$api.index();
				 console.log(re)
				 this.u_city=re.data.u_city
				 this.$u.vuex('setting', re.data.setting)
				 this.piclist_loading=false;
				 this.piclist=Object.values(re.data.piclist);
				 this.piclist1=re.data.piclist1;
				 this.piclist2=re.data.piclist2;
				 this.piclist3=re.data.piclist3;
				 this.piclist4=re.data.piclist4;
				 this.piclist5=re.data.piclist5;
				 this.menus=re.data.menus;
				 this.title=re.data.title;
				 this.logo=re.data.logo;
				 this.news=re.data.news
				},
				rote_url(index){
					const url=this.piclist[index].url;
					if(url){
						useRouter(this.piclist[index].url,{},'navigateTo')
					}
				},
				menus_url(url){
					if(url && url!='#'){
						const isExternalUrl = /^https?:\/\//i.test(url);
						if (isExternalUrl) {
							window.location.href = url;
						}else{
							useRouter(url,{})
						}
					}else{
						toast('功能开发中,敬请期待...')
					}
				},
				videos(id){
					useRouter('/pages/video/videoinfo',{id:id},'navigateTo')
				},
				pay(id){
					useRouter('/pages/pay/buy',{id:id},'navigateTo')
				},
				c_news(e){
					console.log(e);
					useRouter('/pages/news/info',{id:e})
				},
				selectClick(even){
					 setStorageSync('lives',even.id);
					 this.init();
				},
				openkf(){
					//客服地址
					
					if(kf_extInfo && kf_corpId){
						wx.openCustomerServiceChat({
							extInfo: { url: kf_extInfo },
							corpId: kf_corpId,
							success(res) {
								// 成功回调
							}
						});
					}else{
						toast('暂无客服')
					}
					
					
				}
				
			}
		}
	</script>
<style lang="scss">
// .content{padding: 0 20rpx;}
.img-left {
    width: 100%;
    height: auto;
  }
  .right-images {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .img-right-top, .img-right-bottom {
    width: 100%;
    height: auto;
    margin-bottom: 10px; /* 根据需要调整间距 */
  }
  .img-right-bottom {
    margin-bottom: 0; /* 取消最后一个元素的下边距 */
  }

.kefu::after{border: none;}
.kefu{background: #fff;border: none; padding:0 20rpx;}

.pans_count{padding: 12rpx;}
.pans{padding: 20rpx; border:1px #eaeaea solid; border-radius: 20rpx;}

.btn_kf{
	font-size: 15rpx; 
	width: 80rpx; 
	height: 80rpx; 
	border-radius: 80rpx; 
	line-height: 100%;
	display: flex;justify-content: center;  
	align-items: center;
	flex-direction: column;
	background-color: $uni-color-tikucolor;
	color: #fff;
}

.topbar{background: $uni-color-tikucolor;}
.menu-img{width:20rpx; height:20rpx;}	
.grid-text {
		font-size: 30rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: 600;
		font-size: 28rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 24rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
		font-weight: 300;
	}
	.u-order-color{
		color:#19be6b ;
	}
	
</style>